<template>
	<!-- 模板化资讯列表 -->
	<view>
		<view class="order"  v-for="item in list" :key="item.id">  
					<view class="top" @click="goGoodsDetatil(item.id)">
						<view class="left">
							<uni-text class="cuIcon-titles text-blue"></uni-text>
							<view class="store">{{ item.flImgdesc }}</view>
							<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
						</view>
						<!-- <view class="right">
							<text class="text-blue">丢失时间：{{ item.create_time }}</text>
						</view> -->
					</view> 
					<view class="item" @click="goGoodsDetatil(item.id)">  
						<view class="left">
							<image :src="item.flImgurl" mode="aspectFill"></image> 
						</view>
						<view class="content">
							<!-- <view class="title u-line-2 text-bold">{{ item.imgdesc }}</view> -->
							<!-- <view class="type">{{ res.imgdesc }}</view> -->
							<!-- <view class="delivery-time">失主： {{ item.lostname }}</view> -->
						</view>
					</view>
					<u-line color="#f1f1f1" margin="24rpx 0 15rpx 0"></u-line>
					<view class="bottom">
						<view>
							<view class="cu-avatar-group" style="padding-left: 24rpx;">
								<view class="cu-avatar round" v-for="(item,index) in avatar" :key="index"
									:style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
							</view>
							<text class="text-blue text-shadow">状态:{{ item.flStatus }}</text>  
						</view>

						<view class="btnBox">
							<view @click="getClaim(item.id)" class="evaluate btn">认领</view>
						</view>
					</view>
					<text v-if="list.length == 0">暂无数据</text>
				</view>


		
	</view>
	
	
</template>

<script>
	export default {
		// 接收外界传来的数据
		props:['list'],
		// 增加时间过滤器
		filters: {
			formatDate (date) {
				// console.log(date)
				const nDate = new Date(date)
				// console.log(nDate)
				const year = nDate.getFullYear().toString().padStart(2,0)
				const month = nDate.getMonth().toString().padStart(2,0)
				const day = nDate.getDay().toString().padStart(2,0)
				return year +'-' + month +'-'+ day
			}
		},
		methods:{
			navigator (id) {
				// 调用父组件的方法
				this.$emit('itemClick',id)
			},
			getClaim(id) {
				// console.log(id)
				uni.navigateTo({
					url: '/pages/Claim/index?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss">
	.new_item {
		display: flex;
		padding: 10rpx 20rpx;
		border-bottom: 1px solid $search-color;
		image {
			min-width: 200rpx;
			max-width: 200rpx;
			height: 150rpx;
		}
		.right {
			margin-left: 15rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.title {
				font-size: 30rpx;
			}
			.info {
				font-size: 26rpx;
				text:nth-child(2){
					margin-left: 20rpx;
				}
			}
		}
		
	}
		.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		z-index: 6;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-size: 34rpx;
					font-weight: bold;
				}
			}

			.right {
				color: $u-type-warning-dark;

				.progressBox {
					width: 150rpx;
					float: right;
				}
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 260rpx;
					height: 190rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				.title {
					font-size: 28rpx;
					line-height: 45rpx;
				}

				.type {
					margin: 6rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					line-clamp: 3;
					-webkit-box-orient: vertical;
				}

				.delivery-time {
					color: #0081ff;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.bottom {
			line-height: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btnBox {
				width: 150rpx;
				display: flex;
				justify-content: space-between;

				.btn {
					line-height: 52rpx;
					width: 140rpx;
					border-radius: 12rpx;
					border: 2rpx solid $u-tips-color;
					font-size: 26rpx;
					text-align: center;
					color: $u-tips-color;
				}

				.evaluate {
					color: $u-type-primary;
					border-color: $u-type-primary;
				}
			}
		}
	}
</style>
